<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <!-- Le styles -->
    <link href="/css/bootstrap.css" rel="stylesheet"/>
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>
    <link href="/css/bootstrap-responsive.css" rel="stylesheet"/>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/ico/apple-touch-icon-144-precomposed.png"/>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/ico/apple-touch-icon-114-precomposed.png"/>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/ico/apple-touch-icon-72-precomposed.png"/>
    <link rel="apple-touch-icon-precomposed" href="/ico/apple-touch-icon-57-precomposed.png"/>
    <link rel="shortcut icon" href="/ico/favicon.png"/>
</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Project name</a>
            <div class="nav-collapse collapse">
                <p class="navbar-text pull-right">
                    Logged in as <span th:text="${session.username}">Username</span>
                </p>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">培训管理</li>
                    <li class="active"><a href="/trainsearch">培训检索</a></li>
                    <li><a href="/traindetails">培训明细</a></li>
                    <li><a href="/trainmemberdetails">培训人员明细</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
            <span>培训管理/培训检索</span><br/><br/>
            <span>培训状态：&nbsp;</span>
            <select id="status">
                <option>未发布</option>
                <option>报名中</option>
                <option>确定</option>
                <option>完了</option>
            </select><br/>
            <span>培训实施日：&nbsp;</span><br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>开始日期：&nbsp;</span><input type="date" id="startTime"/><br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>结束日期：&nbsp;</span><input type="date" id="endTime"/><br/>
            <span>授课类型：&nbsp;</span>
<!--            <select id="subjects">-->
<!--                <option>新员工素质培训</option>-->
<!--                <option>新员工公司规章培训</option>-->
<!--                <option>日语初级技能</option>-->
<!--                <option>日语中级技能</option>-->
<!--                <option>日语高级技能</option>-->
<!--                <option>管理学初级1</option>-->
<!--                <option>管理学初级2</option>-->
<!--                <option>管理学高级1</option>-->
<!--                <option>管理学高级2</option>-->
<!--                <option>过程体系1</option>-->
<!--                <option>过程体系2</option>-->
<!--                <option>设计技能1</option>-->
<!--                <option>设计技能2</option>-->
<!--                <option>编程技能1</option>-->
<!--                <option>编程技能2</option>-->
<!--                <option>测试技能1</option>-->
<!--                <option>测试技能2</option>-->
<!--                <option>技术专题1</option>-->
<!--                <option>技术专题2</option>-->
<!--                <option>其他</option>-->
<!--            </select>-->
            <select id="trainTypeName">
                <option>新员工培训</option>
                <option>日语技能</option>
                <option>管理学初级</option>
                <option>管理学高级</option>
                <option>过程体系</option>
                <option>设计技能</option>
                <option>编程技能</option>
                <option>测试技能</option>
                <option>技术专题</option>
                <option>其他</option>
            </select>
            <button type="button" class="btn" onclick="trainSearch()">检索</button>
            <button type="button" class="btn" onclick="location.href = '/traindetails'">追加</button>
            <div th:if="${not #lists.isEmpty(session.train_searches)}">
                <table class="table table-condensed">
                    <tr>
                        <th>培训No.</th>
                        <th>培训名称</th>
                        <th>实施日</th>
                        <th>授课者</th>
                        <th>培训状态</th>
                        <th>计划参加人数</th>
                        <th>确定参加人数</th>
                        <th>操作：</th>
                    </tr>
                    <tr th:each="train_search : ${session.train_searches}">
                        <td th:text="${train_search.getTrainId()}">培训No.</td>
                        <td th:text="${train_search.getTrainTypeName()}">培训名称</td>
                        <td th:text="${train_search.getPeriod()}">实施日</td>
                        <td th:text="${train_search.getDirectorName()}">授课者</td>
                        <td th:text="${session.statusStr}">培训状态</td>
                        <td th:text="${train_search.getPlannedJoinNum()}">计划参加人数</td>
                        <td th:text="${train_search.getConfirmedJoinNum()}">确定参加人数</td>
                        <td><button type="button" th:id="${train_search.getTrainId()}" class="trainBtn" onclick="trainLessonUpdate()">课程内容</button>
                            <button type="button" th:if="${session.statusStr} eq '未发布'" th:id="${train_search.getTrainId()}" class="btn" onclick="trainLessonRelease()">发布</button>
                            <button type="button" th:if="${session.statusStr} eq '报名中'" th:id="${train_search.getTrainId()}" class="btn" onclick="trainLessonConfirm()">确定</button>
                            <button type="button" th:if="${session.statusStr} eq '报名中'" th:id="${train_search.getTrainId()}" class="btn btn-primary btn-lg" data-toggle="modal" onclick="javascript:getStudentsList()">已报名名单</button>
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">报名学员名单</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div th:if="${not #lists.isEmpty(session.studentsMap)}" id="apEidtDiv" th:fragment="apEidDiv">
                                                <table class="table table-condensed">
                                                    <tr>
                                                        <th>部门</th>
                                                        <th>姓名</th>
                                                        <th>职务</th>
                                                    </tr>
                                                    <tr id="stuStr" th:each="stuMap : ${session.studentsMap}">
                                                        <td><input th:value="*{stuMap.value[0]}"/></td>
                                                        <td><input th:value="*{stuMap.key}"/></td>
                                                        <td><input th:value="*{stuMap.value[1]}"/></td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!--                                            <button type="button" class="btn btn-primary">提交更改</button>-->
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal -->
                            </div>
                            <button th:if="${session.statusStr} eq '确定'" type="button" th:id="${train_search.getTrainId()}" class="btn" onclick="">完了</button>
                            <button th:if="${session.statusStr} eq '报名中'" type="button" th:id="${train_search.getTrainId()}" class="btn" onclick="location.href = '/trainmemberdetails'">确认培训名单</button></td>
                    </tr>
                </table>
            </div>
        </div><!--/span-->
    </div><!--/row-->

    <hr/>

    <footer>
        <p>&copy; Company 2020</p>
    </footer>

</div><!--/.fluid-container-->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap-transition.js"></script>
<script src="/js/bootstrap-alert.js"></script>
<script src="/js/bootstrap-modal.js"></script>
<script src="/js/bootstrap-dropdown.js"></script>
<script src="/js/bootstrap-scrollspy.js"></script>
<script src="/js/bootstrap-tab.js"></script>
<script src="/js/bootstrap-tooltip.js"></script>
<script src="/js/bootstrap-popover.js"></script>
<script src="/js/bootstrap-button.js"></script>
<script src="/js/bootstrap-collapse.js"></script>
<script src="/js/bootstrap-carousel.js"></script>
<script src="/js/bootstrap-typeahead.js"></script>

<script type="text/javascript">
    function trainSearch() {
        var status = $("#status").val();
        if (status == "未发布"){
            status = "0";
        }else if (status == "报名中"){
            status = "1";
        }else if (status == "确定"){
            status = "2";
        }else {
            status = "3";
        }
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        var trainTypeName = $("#trainTypeName").val();
        $.post("/train/search",{"status":status,"startTime":startTime,"endTime":endTime,"trainTypeName":trainTypeName},function (data) {
        },"json");
        setTimeout(function(){window.location.reload()},1000);
    }

    // var trLength = $('tr').length-1;
    // for(var i=0;trLength>i;i++){
    //     $('.trainBtn')[i].click(function () {
    //         var trainId = $('.trainBtn')[i].getAttribute('id');
    //         $.post("/train/lesson/update",{"trainId":trainId},function () {},"json");
    //         location.href = "/lessoncontentupdate";
    //     })
    // }

    function trainLessonUpdate() {
        var trainId = event.target.id;
        $.post("/train/lesson/update",{"trainId":trainId},function () {},"json");
        location.href = "/lessoncontentupdate";
    }

    // function lessonContent() {
    //     this.id
    // }

    function trainLessonRelease() {
        var trainId = event.target.id;
        $.post("/train/lesson/release",{"trainId":trainId},function () {},"json");
    }
    
    function trainLessonConfirm() {
        var trainId = event.target.id;
        $.post("/train/lesson/confirm",{"trainId":trainId},function () {},"json");
    }

    function getStudentsList() {
        var trainId = event.target.id;
        $.post("/train/lesson/list/1",{"trainId":trainId},function () {
        },"json");
        $("#myModal").modal("show");
        // $('#apEidtDiv').load("/train/lesson/list",{"trainId":trainId}, function (response,status,xhr) {
        //     $("#myModal").modal('show');
        // });
    }

    function trainLessonTerminate() {
        var trainId = event.target.id;
        $.post("/train/lesson/terminate",{"trainId":trainId},function () {},"json");
    }

    function trainMemberDetails() {
        var trainId = event.target.id;
        $.post("/train/member/details",{"trainId":trainId},function () {},"json");
    }
</script>
</body>
</html>